<template>
  <div class="account">
    <head></head>
    <div class="account-body">
      <div class="account-head-box">
        <div class="account-head-avatar">
          <el-image
            :src="require('@/assets/images/banner-item.jpeg')"
            alt="头像"
            class="avatar"
          />
        </div>
        <div class="account-head-username label">人在旅途</div>
        <div class="label">
          <div>粉丝</div>
          <div class="number">2333</div>
        </div>
        <div class="label">
          <div>关注</div>
          <div class="number">222</div>
        </div>
        <div class="label">
          <div>获赞</div>
          <div class="number">233</div>
        </div>
        <el-input
          type="text"
          placeholder="个性签名"
          v-model="personalSign"
          maxlength="16"
          show-word-limit
        ></el-input>
      </div>
      <div class="account-nav">
        <el-menu
          mode="horizontal"
          default-active="1"
          @open="handleOpen"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-video-camera-solid"></i>
            <span slot="title">视频</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-message-solid"></i>
            <span slot="title">动态</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-star-on"></i>
            <span slot="title">收藏</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-setting"></i>
            <span slot="title">设置</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="account-content" v-for="item in 3" :key="item">
        <div class="account-content-head">
          <div class="name">首页块</div>
        </div>
        <div class="account-content-body">
          <video-item
            v-for="item in 8"
            :key="item"
            style="width: 20%"
          ></video-item>
        </div>
      </div>

      <div></div>
    </div>
  </div>
</template>
<script>
import VideoItem from "@/components/video/VideoItem.vue";
import Head from '../../components/common/Head.vue';
export default {
  components: { VideoItem, Head },
  name: "Account",
  data() {
    return {
      uuid: this.$route.params.uuid,
      personalSign: "213123",
    };
  },
};
</script>
<style>
.account-body {
  white-space: nowrap;
  padding: 50px 100px 0px 100px;
  background-image: url("../../assets/images/background-image.jpeg");
}
.account-head-box {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 0 1px #eee;
  padding: 10px 10px;
  background-color: white;
}

.account-head-username {
  font-weight: bolder;
}
.avatar {
  width: 50px;
  height: 50px;
}
.label {
  padding: 10px;
}

.account-nav {
  display: block;
  text-align: center;
  box-shadow: 0 0 0 1px rgb(179, 178, 178);
}
.account-content {
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 0 1px #eee;
  background-color: white;
}
.account-content-head {
  display: flex;
  flex-wrap: wrap;
  /* margin-bottom: 20px; */
  margin: auto;
  justify-content: space-between;
}
.account-content-body {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  justify-content: space-between;
}
</style>